<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/swiper.css">
    <style>
        .content {
            height: 100vh;
        }
        
        #investproSwiper {
            width: 100%;
            overflow: hidden;
        }
        
        #investproSwiper .swiper-slide {
            width: 40vh;
        }
        
        #investproSwiper .photo {
            width: 100%;
            height: 0;
            padding-bottom: 150%;
            background-position: center;
            background-size: cover;
        }
        
        .ttl {
            padding: 0 0.75rem 0.75rem;
            text-align: center;
            font-size: 0.7rem;
        }
        
        .share {
            padding: 0 1rem 1rem;
        }
        
        .share li {
            width: 4.5rem;
            text-align: center;
            font-size: 0.6rem;
            color: #333;
        }
        
        .share li img {
            height: 2rem;
            width: auto;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="content aui-flex-row aui-flex-between">
        <header class="aui-bar-nav" id="header">
            <div class="aui-title">VIP大礼包</div>
            <div class="aui-pull-right" tapmode onclick="api.closeFrame()">
                <img style="width:1rem;" src="../../image/common/30.png">
            </div>
        </header>
        <div class="swiper-container" id="investproSwiper">
            <div class="swiper-wrapper" id="data_html">
                
            </div>
        </div>
        <script type="text/x-dot-template" id="data_tpl">
        {{ for(var i in it.data){ }}
        <div class="swiper-slide" data-src="{{= it.data[i] }}"><div class="photo" style="background-image:url({{= it.imageLists[i].img_src }})"></div></div>
        {{ } }}
        </script>
        <div class="btmShare">
            <div class="ttl">分享给好友</div>
            <ul class="share aui-flex-col aui-flex-around">
                <li tapmode onclick="savePic();">
                    <div class="imgBox"><img src="../../image/common/51.png" alt=""></div>
                    <div>保存图片</div>
                </li>
                <li tapmode onclick="share('session');">
                    <div class="imgBox"><img src="../../image/common/11.png" alt=""></div>
                    <div>微信好友</div>
                </li>
                <li tapmode onclick="share('timeline');">
                    <div class="imgBox"><img src="../../image/common/10.png" alt=""></div>
                    <div>朋友圈</div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
var shareImgArr = [];
var shareUrl;
    apiready = function() {
        api.parseTapmode();
		var header = $api.byId('header');
        $api.fixStatusBar(header);
        shareUrl = api.pageParam.shareUrl;
        getData();
    };
    function getData(){
        showProgress();
        var postData = {
            share_url: shareUrl,
            userid: getUserId(),
            img_type: 1
        }
		api.ajax({
			url: BASE_URL + 'App/Topic/qrcodeImg',
			method: 'post',
			data: {
				values: postData
			}
		},function(ret,err){
			if (ret && ret.code == 1) {
                shareImgArr = ret.data;
                var tpl = $$('#data_tpl').html();
                var tempFn = doT.template(tpl);
                $$('#data_html').html(tempFn(ret));
                api.parseTapmode();
                sliderInit();
			}
			hideProgress();
		});
	}
    //图片滚动
    function sliderInit() {
        new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            }
        });
    }
    //保存图片
    function savePic(){
        showProgress();
        var imgUrl = $$('#investproSwiper .swiper-slide-active').data('src');
        var randomid = Math.floor(Math.random()*1000000);
        api.download({
			url: imgUrl,
			savePath: api.fsDir + 'download_photo_'+ randomid +'.png',
			report: false,
			cache: false,
			allowResume: false
		}, function(ret, err) {
			if (ret.state == 1) {
				api.saveMediaToAlbum({
					path: ret.savePath
				}, function(ret, err) {
					if(ret && ret.status){
						toast('保存成功');
					}else {
                        toast('保存失败');
                    }
                    hideProgress();
				});
			}
		});
    }
    //选择弹窗后 分享事件
function share(scene){
	var wx = api.require('wx');
    var imgUrl = $$('#investproSwiper .swiper-slide-active').data('src');
	api.download({
		url: imgUrl,
		savePath : 'fs://share_img/wxshareimg.jpg',
		report : false,
		cache : false,
		allowResume : false
	}, function(ret, err) {
		if (ret.state == 1) {
			//下载成功
			realPath = ret.savePath;
			wx.shareImage({
				apiKey:'',
				scene: scene,
				thumb: '',
				contentUrl: 'fs://share_img/wxshareimg.jpg'
			}, function(ret, err) {
				if (err.code==0) {
					toast('分享成功');
				} else {
					toast('分享失败');
				}
			});
		}
	});

}
</script>

</html>